﻿@model CalendarIndexViewModel
@section PageTitle { | Calendar }
@section Head {
	@Html.CSS("calendar.css")
	@Html.Script("fullcalendar.min.js")
}
@section Title {
	<div id="title">
		<div class="title-div">
			<h1>CALENDAR</h1>
		</div>
	</div>
}
<ul class="calendar-view-list">
	<li><a class="current-link" href="@Url.Action("Index", "Calendar")">Calendar View</a></li>
	<li><a href="@Url.Action("List", "Calendar")">List View</a></li>
</ul>
<div id="content-wide-div">
	<script type="text/javascript">
		$(document).ready(function () {
			$('#calendar').fullCalendar({
				firstDay: 1,
				year: 2012,
				month: @(DateTime.Now.Month - 1),
				header: { left: 'prev', center: 'title', right: 'next' },
				editable: false,
				dayNamesShort: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
				events: @Html.Raw(Model.Events.Select(x => new
									{
										title = x.Title, 
										url = Url.ContentItemDetails(x), 
										start = x.StartDate,
										end = x.EndDate,
										allDay = x.AllDayEvent
									}).ToJson()),
				timeFormat: 'HH:mm{-HH:mm} '
			});
		});
	</script>
	<div id="calendar"></div>
</div>